@charset "utf-8";
.PostMix .cateTab {
text-align: center;
/*margin-bottom: 30px*/
}


.PostMix .cateTab span.button {
border: medium;
background: #e08b00;
color: #000;
margin: 4px;
height: 30px;
line-height: 30px;
padding: 0 14px;
display: inline-block;
cursor: pointer;
border-radius: 50px
}
.PostMix .cateTab a{color: #000}
.PostMix .cateTab a:hover, a:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.PostMix .cateTab span.button.mixitup-control-active {
background: #e08b00;
color: #000
}
.box{
		    text-align: center;
		    overflow: hidden;
		    color: #fff;
		    position: relative;
		}
		.box:after{
		    content: "";
		    width: 100%;
		    height: 100%;
		    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 69%, rgba(0, 0, 0, 0.76) 100%);
		    position: absolute;
		    top: 0;
		    left: 0;
		    transition: all 0.5s ease 0s;
		}
		.box:hover:after{
		    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.09) 11%, rgba(0, 0, 0, 0.12) 13%, rgba(0, 0, 0, 0.19) 20%, rgba(0, 0, 0, 0.29) 28%, rgba(0, 0, 0, 0.29) 29%, rgba(0, 0, 0, 0.42) 38%, rgba(0, 0, 0, 0.46) 43%, rgba(0, 0, 0, 0.53) 47%, rgba(0, 0, 0, 0.75) 69%, rgba(0, 0, 0, 0.87) 84%, rgba(0, 0, 0, 0.98) 99%, rgba(0, 0, 0, 0.94) 100%);
		}
		.box img{
		    width: 100%;
		    height: auto;
		}
		.box .box-content{
		    width: 100%;
		    padding: 20px;
		    margin-bottom: 20px;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    z-index: 1;
		}
		.box .title{
		    font-size: 22px;
		    font-weight: 700;
		    text-transform: uppercase;
		    margin: 0 0 10px 0;
		    transform: translateY(145px);
		    transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s;
		}
		.box .post{
		    display: block;
		    padding: 8px 0;
		    font-size: 15px;
		    transform: translateY(145px);
		    transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s;
		}
		.box:hover .title,
		.box:hover .post{
		    transform: translateY(0);
		}
		.box .social{
		    list-style: none;
		    padding: 0 0 5px 0;
		    margin: 40px 0 25px;
		    opacity: 0;
		    position: relative;
		    transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
		    transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s;
		}
		.box:hover .social{
		    opacity: 1;
		    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		.box .social:before{
		    content: "";
		    width: 50px;
		    height: 2px;
		    background: #fff;
		    margin: 0 auto;
		    position: absolute;
		    top: -23px;
		    left: 0;
		    right: 0;
		}
		.box .social li{
		    display: inline-block;
		}
		.box .social li a{
		    display: block;
		    width: 40px;
		    height: 40px;
		    line-height: 40px;
		    border-radius: 50%;
		    background: #6d3795;
		    font-size: 20px;
		    color: #fff;
		    margin-right: 10px;
		    transition: all 0.3s ease 0s;
		}
		.box .social li a:hover{
		    background: #e08b00;
		}
		.box .social li:last-child a{
		    margin-right: 0;
		}
		@media only screen and (max-width:990px){
		    .box{ margin-bottom: 30px; }
		}
/*.box{
		    text-align: center;
		    overflow: hidden;
		    position: relative;
		}
		.box:after{
		    content: "";
		    width: 100%;
		    height: 100%;
		    background-color: rgba(0,63,91,0.6);
		    position: absolute;
		    top: 0;
		    left: 0;
		    opacity: 0;
		    transition: all 0.5s ease 0s;
		}
		.box:hover:after{
		    opacity: 1;
		}
		.box img{
		    width: 100%;
		    height: auto;
		}
		.box .box-content{
		    width: 100%;
		    background: #255773;
		    padding: 10px 0;
		    color: #d5f7ff;
		    position: absolute;
		    bottom: -100%;
		    left: 0;
		    z-index: 1;
		    transition: all 0.5s ease 0s;
		}
		.box:hover .box-content{
		    bottom: 0;
		}
		.box .title{
		    font-size: 22px;
		    font-weight: 700;
		    margin: 0 0 8px 0;
		    text-transform: uppercase;
		}
		.box .post{
		    display: block;
		    font-size: 15px;
		    text-transform: capitalize;
		}
		.box .social{
		    width: 100%;
		    list-style: none;
		    padding: 0;
		    margin: 0;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: 1;
		}
		.box .social li{
		    display: inline-block;
		    margin-right: 7px;
		    position: relative;
		    transform: translateY(-100px);
		    transition: all 0.5s ease 0s;
		}
		.box:hover .social li:first-child{
		    transition-delay: 0.5s;
		}
		.box:hover .social li:last-child{
		    transition-delay: 0.8s;
		}
		.box .social li:before{
		    content: "";
		    position: absolute;
		    width: 1px;
		    height: 50px;
		    background: #f1e7c3;
		    top: 0;
		    left: 0;
		    right: 0;
		    margin: 0 auto;
		}
		.box:hover .social li{
		    transform: translateY(0);
		}
		.box .social li a{
		    display: block;
		    width: 40px;
		    height: 40px;
		    line-height: 40px;
		    border-radius: 50%;
		    background: #f1e7c3;
		    font-size: 20px;
		    font-weight: 700;
		    color: #003f5b;
		    margin-top: 50px;
		    opacity: 1;
		    transition: all 0.3s ease 0s;
		}
		.box:hover .social li a{
		    opacity: 1;
		}
		.box .social li a:hover{
		    background: #ff9420;
		    color: #fff;
		}
		@media only screen and (max-width:990px){
		    .box{ margin-bottom: 30px; }
		}*/


@media screen and (max-width:720px) {
	

	.PostMix .cateTab span.button {
		font-size: 12px;
		margin: 3px;
		padding: 0 12px;
		height: 28px;
		line-height: 28px
	}
}